<template>
  <div style="font-size: 0.35rem">
    <!-- 根据guan变量决定是否显示用户信息 -->
    <div v-if="name">
      <!-- 导航栏 -->
      <div
        style="
          display: flex;
          height: 1rem;
          line-height: 1rem;
          padding-left: 0.4rem;
        "
      >
        <p @click="$router.go(-1)"><</p>
        <p style="text-align: center; flex: 1">健康档案</p>
      </div>
      <!-- 实名认证提示 -->
      <div>
        <van-notice-bar
          wrapable
          :scrollable="false"
          class="text"
          text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证！"
        />
      </div>
      <!-- 用户信息展示 -->
      <div class="xin">
        <div class="box">
          <div
            style="
              margin-left: 0.4rem;
              margin-right: 0.4rem;
              margin-top: 0.5rem;
              border: 0.01rem solid #ccc;
              width: 6.6rem;
              height: 2rem;
            "
          >
            <div
              style="
                width: 1.5rem;
                height: 1.5rem;
                line-height: 1.5rem;
                text-align: center;
                border-radius: 50%;
                background: rgb(7, 94, 234);
                color: aliceblue;
                margin-top: 0.25rem;
                margin-left: 0.2rem;
                float: left;
              "
            >
              {{ doctor }}
            </div>
            <div style="float: left; margin-left: 0.3rem; margin-top: 0.5rem">
              <p>
                姓名：{{ name }}
                <span
                  style="
                    float: right;
                    margin-right: -0.6rem;
                    display: inline-block;
                    width: 1.3rem;
                    height: 0.5rem;
                    text-align: center;
                    line-height: 0.5rem;
                    color: white;
                    background: palegreen;
                  "
                  >已认证</span
                >
              </p>
              <p>手机号：{{ sex }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 新建档案按钮 -->
      <div style="padding-left: 0.4rem">
        <!-- <button class="but" @click="add">新建档案</button> -->
        <button class="but" @click="add">新建档案</button>
      </div>
    </div>
    <div v-else>
      <!-- 导航栏 -->
      <div
        style="
          display: flex;
          height: 1rem;
          line-height: 1rem;
          padding-left: 0.4rem;
        "
      >
        <p @click="$router.go(-1)"><</p>
        <p style="text-align: center; flex: 1">健康档案</p>
      </div>
      <!-- 实名认证提示 -->
      <div>
        <van-notice-bar
          wrapable
          :scrollable="false"
          class="text"
          text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证！"
        />
      </div>
      <!-- 用户信息展示 -->
      <div class="xin">
        <div ref="box"></div>
      </div>
      <!-- 新建档案按钮 -->
      <div style="padding-left: 0.4rem; margin-top: -2rem">
        <!-- <button class="but" @click="dj1">点击</button> -->
        <button class="but" @click="add">新建档案</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 新建档案按钮点击事件
const add = () => {
  router.push('/danga')
}

// 获取姓名
const name = JSON.parse(localStorage.getItem('name'))
console.log(name)
// 获取关系
const doctor = JSON.parse(localStorage.getItem('doctor'))
console.log(doctor)
// 获取手机号
const sex = JSON.parse(localStorage.getItem('sex'))
console.log(sex)

// // 从localStorage获取用户信息和认证状态
// const dang = localStorage.getItem('dang')
// // console.log(dang)
// const dangObj = JSON.parse(dang)
// console.log(dangObj)
// const guan = localStorage.getItem('guan')
// // console.log(guan)
// const guanObj = JSON.parse(guan)
// console.log(guanObj)

// // 获取box元素
// const yong = document.querySelector('.box')
// console.log(yong)

// const box = document.querySelector('.box')
if (name.length != 0 && doctor.length != 0) {
  const box = document.querySelector('.box')

  console.log(box)
  // if (yong) {
  // 动态生成用户信息HTML
  const newDiv = document.createElement('div')

  newDiv.textContent = `<div
        style="
          margin-left: 0.4rem;
          margin-right: 0.4rem;
          margin-top: 0.5rem;
          border: 0.01rem solid #ccc;
          width: 6.6rem;
          height: 2rem;
        "
      >
        <div
          style="
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            text-align: center;
            border-radius: 50%;
            background: rgb(7, 94, 234);
            color: aliceblue;
            margin-top: 0.25rem;
            margin-left: 0.2rem;
            float: left;
          "
        >
          ${doctor}
        </div>
        <div style="float: left; margin-left: 0.3rem; margin-top: 0.5rem">
          <p>
            姓名：${name}
            <span
              style="
                float: right;
                margin-right: -0.6rem;
                display: inline-block;
                width: 1.3rem;
                height: 0.5rem;
                text-align: center;
                line-height: 0.5rem;
                color: white;
                background: palegreen;
              "
              >已认证</span
            >
          </p>
          <p>手机号：${sex}</p>
        </div>
      </div>
`
  if (box) {
    const firstChild = box.firstChild
    if (firstChild) {
      box.insertBefore(newDiv, firstChild)
    } else {
      box.appendChild(newDiv)
    }
  }

  console.log(newDiv)
  // document.querySelector('.box').value.appendChild(newDiv)
  // }
}
</script>

<style scoped>
.xin {
  width: 100%;
  height: 7.5rem;
  overflow: auto;
  border-bottom: 1px solid #000;
}
.box {
  height: 20rem;
}
.text {
  font-size: 0.3rem;
  margin: 0.2rem 0.3rem;
  background: rgb(241, 212, 180);
  color: rgb(234, 132, 7);
}
.but {
  width: 90%;
  height: 0.8rem;
  /* margin: 0.3rem auto; */
  border-radius: 0.1rem;
  background: rgb(7, 94, 234);
  color: white;
  border: none;
  font-size: 0.3rem;
  text-align: center;
  position: absolute;
  left: 0.4rem;
  bottom: 1.2rem;
}
</style>
